<template>
  <h1>{{ o }}</h1>
  <button @click="setName">点击</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { reactive, toRefs } from 'vue';
const o = reactive({
  name: "张三",
  age: 18
})
// let  newO = {...o}  // 直接解构出来 就不再是响应式数据
let newO = { ...toRefs(o) }//把o中所有的属性都变成了 ref属性
const setName = () => {
  console.log(newO.age.value++);

  // console.log(newO.age++);
  // console.log(o.age++);
}
</script>
<!-- <script>
  export default {
    name:"App"
  }
</script> -->